import { defineComponent, h, markRaw } from 'vue'
import ContainerNode from '../../ItemNode/ContainerNode'
import {
  ElCarousel,
  ElCarouselItem,
  ElInputNumber,
  ElRadioButton,
  ElRadioGroup,
  ElSwitch,
  ElText
} from 'element-plus'
import classes from '../../ItemNode/ItemNode.module.css'
import Tip from '../../panel/Tip.vue'

export default class NCarousel extends ContainerNode {
  isNCarousel = true
  isDataDisplayNode = true

  constructor(node?: NCarousel) {
    super(node)

    if (!node) {
      this.path = './components/NCarousel/NCarousel.tsx'
      this.name = '走马灯容器'

      this.props.type = ''
      this.props.autoplay = false
      this.props.interval = 3000
      this.props.loop = false // loop为true时ElCarouselItem会复制元素导致无法选中节点，所以编辑的时候必须为false
    }

    const pComponent = this.component
    this.component = markRaw(
      defineComponent(
        (props) => {
          return () => (
            <pComponent>
              <ElCarousel
                height={this.props.style.height}
                type={this.props.type}
                autoplay={this.props.autoplay}
                interval={this.props.interval}
                loop={this.props.loop}
              >
                {() =>
                  this.children.map((child, i) => h(ElCarouselItem, null, () => h(child.component)))
                }
              </ElCarousel>
            </pComponent>
          )
        },
        {
          name: 'NCarousel'
        }
      )
    )

    const pView = this.view
    this.view = markRaw(
      defineComponent((props) => {
        this.props.style.height = '100%'

        return () => <pView></pView>
      })
    )

    const pParams = this.params
    this.params = markRaw(
      defineComponent(() => {
        return () => (
          <pParams>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                类型
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.type} size="small">
                  <ElRadioButton value="" label="默认" size="small"></ElRadioButton>
                  <ElRadioButton value="card" label="卡片" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                自动切换
              </ElText>
              <div class={classes['params-item-content']}>
                <ElSwitch v-model={this.props.autoplay}></ElSwitch>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                自动切换间隔
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInputNumber
                  v-model={this.props.interval}
                  min={1000}
                  step={500}
                  size="small"
                ></ElInputNumber>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                自动切换循环
                <Tip content={'编辑的时候必须为false'}></Tip>
              </ElText>
              <div class={classes['params-item-content']}>
                <ElSwitch v-model={this.props.loop}></ElSwitch>
              </div>
            </div>
          </pParams>
        )
      })
    )
  }

  toVue(): SfcObj {
    const sfcObj = super.toVue()

    sfcObj.imports = {
      ...sfcObj.imports,
      'element-plus': {
        ElCarousel: 'ElCarousel',
        ElCarouselItem: 'ElCarouselItem'
      }
    }

    sfcObj.template = sfcObj.template.replace(
      '<slot></slot>',
      `
  <ElCarousel
    height="${this.props.style.height}"
    type="${this.props.type}"
    :autoplay="${this.props.autoplay}"
    :interval="${this.props.interval}"
    :loop="${this.props.loop}"
  >
    ${this.children.map((child, i) => `<ElCarouselItem>\n      ${child.uuid}\n    </ElCarouselItem>`).join('\n  ')}
  </ElCarousel>
      `
    )

    return sfcObj
  }
}
